


import React, { useEffect } from 'react'

import "./App.css"
import Header from "./components/Header/index"
import List from "./components/List/index"
// import Item from './components/List/Item'
import Footer from './components/Footer'
import { useState } from 'react'
// import { nanoid } from 'nanoid'

export default function App() {

  //数据持久化
  let todoListinit = []
  //初始化
  useEffect(() => {
    //初始化的值拿到则是这个值 拿不到是空数组
    setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
  }, [])

  ///因为兄弟组件拿不到数据所以把数据放在父组件里
  // 这种做法叫状态提升 
  //  done: false 按钮选择 后台控制
  //把数据从父组件给列表组件
  // todoList = {todoList}
  const [todoList, setTodoList] = useState(todoListinit)
  //默认值数据
  // console.log(todoList);

  //每次修改 更新的todoListinit 如果改变则在本地保存
  useEffect(() => {
    localStorage.setItem("todoList", JSON.stringify(todoList))
  }, [todoList])

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header setTodoList={setTodoList} todoList={todoList} />
        <List todoList={todoList} setTodoList={setTodoList} />
        <Footer todoList={todoList} setTodoList={setTodoList} />
      </div>
    </div>
  )
}
